<template>
  <NavBar></NavBar>
    <div class="menu-box">
        <div class="card friend-card" @click="fightWithFriend">好友对战</div>
        <div class="card matching-card" @click="fightWithOthers">匹配对战</div>
        <div class="card ai-card" @click="fightWithAi">AI对战</div>
        <div class="card local-card" @click="fightWithYouSelf">本地对战</div>
    </div>
</template>

<script>
    // import router from "@/router";
    // import store from "@/store";
    import {useStore} from "vuex";
    import NavBar from "@/components/NavBar.vue";
    import {ElMessage} from "element-plus";
    export default {
      components: {NavBar},

      setup() {
        const store = useStore();
        const fightWithFriend = () => {

          store.dispatch("createRoom",{
            token:store.state.user.token,
            success(resp) {
              // console.log("getInfo成功");
              // router.push({ name: "home" });
              store.state.pk.status = "matching"
              ElMessage.success(resp);
            },
            error(resp) {
              ElMessage.error(resp);
            },
          })
          // console.log("fightWithFriend");
          // await router.push('/fight/vsfriend');
        }

        const fightWithOthers = () => {
          store.commit("updateIsMatching",true);
          store.commit("updateRoomId",{
            roomId:"-1",
            isRoomUser:true,
          })
          store.state.pk.status = "matching"
        }

        const fightWithAi = () => {
          store.commit("updateBotId",0)
          store.commit("updateOpponent",{
            username:"G7人",
            photo:"https://cdn.acwing.com/media/article/image/2024/12/31/134627_0bdcf210c7-OIP-C.jpg",
            id:-10,
          })
          store.commit("updateIsReady",true);
          store.commit("updateRoomId",{
            roomId:"-1",
            isRoomUser:true,
          })

          store.commit("updateStatus","matching");

        }
        const fightWithYouSelf = () => {
          store.commit("updateLocalHostPk",true);
          store.commit("updateOpponent",{
            username:"你自己",
            photo:store.state.user.photo,
            id:-10,
          })
          store.commit("updateRoomId",{
            roomId:"-1",
            isRoomUser:true,
          })
          store.commit("updateStatus","playing");
        }
        return {
          fightWithFriend,
          fightWithAi,
          fightWithYouSelf,
          fightWithOthers,
        }
      },


    }


</script>

<style scoped>
    .menu-box {
        margin: auto;
        padding-top: 100px;
        width: 500px;
        height: 80vh;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直居中 */
        align-items: center;     /* 水平居中 */
        gap: 20px;
    }

    .card {
        width: 20vw;
        height: 10vh;
        font-size: 18px;
        background: #fff;
        border: none;
        border-radius: 10px;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.8s;
        user-select: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .card:hover {
        box-shadow: 0 8px 16px rgba(68, 60, 60, 0.2);
        background: #505050;
        color: #fff;
        transition: 0.8s;
        letter-spacing: 4px;
        font-size: 20px;
    }

    .friend-card {
        background: linear-gradient(45deg, #ff6b6b, #ffe66d);
    }

    .matching-card {
        background: linear-gradient(45deg, #ff6b6b, #ff9f1c);
    }

    .ai-card {
        background: linear-gradient(45deg, #ff6b6b, #a55eea);
    }

    .local-card {
        background: linear-gradient(45deg, #ff6b6b, #4bcffa);
    }
</style>
